<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="icomoon/style.css" />
	</head>
	<body>
		<div id="vue">
			<!--头部开始-->
			<header>
				<div id="wrap">
					<!--网页logo部分开始-->
					<div id="logo">
						<span class="icon-stackoverflow"></span>
					</div>
					<!--网页logo部分结束-->
					
					<!--网页导航模块开始-->
					<nav>
						<ul>
							<li class="listFirst">推荐</li>
							<li v-for="(sourse,index) in majorsData" @click="checkMajors(index,sourse.job.majors.majorsId)">
								{{sourse.job.majors.majorsName}}
							</li>
							<li class="icon-paragraph-justify listLast"></li>
						</ul>
					</nav>
					<!--网页导航模块开始-->
					
					<!--网页搜索模块开始-->
					<div id="search">
						<input type="text" name="" id="searchText" placeholder="请输入要搜索的内容"/>
						<input type="button" name="" id="searchButton" value="搜索" @click="search()" />
					</div>
					<!--网页搜索模块开始-->
					
					<!--网页注册登录模块开始-->
					<div id="login" @click="login()" ></div>
					<!--网页注册登录模块结束-->
				</div>
			</header>
			<!--头部结束-->
			
			<!--内容区模块开始-->
			<article>
				<!--轮番图开始-->
				<section id="section1">
					<!--图片列表容器开始-->
					<ul id="list" style="left:0">
						<li v-for="(turn,index) in turnData" @click="video(index,turn.sourseId)" >
							<img :src="turn.sourseImg" alt="" />
							<div id="sourseName">{{turn.sourseName}}</div>
						</li>
						<li v-for="(turn,index) in turnData" @click="video(index,turn.sourseId)" >
							<img :src="turn.sourseImg" alt="" />
							<div id="sourseName">{{turn.sourseName}}</div>
						</li>
						<li v-for="(turn,index) in turnData" @click="video(index,turn.sourseId)" >
							<img :src="turn.sourseImg" alt="" />
							<div id="sourseName">{{turn.sourseName}}</div>
						</li>
					</ul>
					<!--图片列表容器结束-->
					
					<!--切换按钮列表开始-->
					<div id="buttons">
						<span class="active"></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
					<!--切换按钮列表结束-->
					<!--左右箭头开始-->
					<a href="javascript:;" id="prev" class="icon-circle-left arrow"></a>
					<a href="javascript:;" id="next" class="icon-circle-right arrow"></a>
					<!--左右箭头结束-->
				</section>
				<!--轮番图结束-->
				
				<!--职业所有的课程模块开始-->
				<section id="section2">
					<div id="container" v-for="(job,index) in jobData.job" :key="index">
						<!--职业部分开始-->
						<div id="job">
							<ul>
								<li id="name">
									<span>{{job.jobName}}</span>
								</li>
								<li id="more">
									<span>更多</span>
									<span class="icon-file-video"></span>
								</li>
								<li id="avgSal">
									<span>行业平均薪资：{{job.avgSal}}</span>
								</li>
							</ul>
							<div id="intro">
								<h4>职业简介：</h4>
								<p id="introText">{{job.jobIntro}}</p>
							</div>
						</div>
						<!--职业部分开始-->
						
						<!--课程部分开始-->
						<div id="sourse">
							<ul>
								<li v-for="(sourse,s) in jobData.sourseData" :key="s" v-if="s==index" @click="video(s,sourse.sourseId)">
									<img :src="sourse.sourseImg" alt="" />
									<div id="sname">{{sourse.sourseName}}</div>
								</li>
							</ul>
						</div>
						<!--课程部分结束-->
						{{s}},{{index}},{{sourse.sourseId}}
					</div>
				</section>
				<!--职业所有的课程模块结束-->
				
			</article>
			<!--内容区模块结束-->
		</div>
		
		
		<footer>
			<ul>
				<li>
					<span class="icon-stackoverflow orange"></span>
					<span>大连金书在线教育有限公司</span>
				</li>
				<li>
					<span class="icon-office orange"></span>
					<span>大连高新园区广贤路99号金书大厦99层</span>
				</li>
				<li>
					<span class="icon-phone orange"></span>
					<span>0411-84977106</span>
				</li>
				<li>
					<span class="icon-mail orange"></span>
					<span>dl-tingting@163.com</span>
				</li>
				<li>
					<span class="icon-bubbles2 orange"></span>
					<span>13854385438</span>
				</li>
			</ul>
		</footer>
		
		<script type="text/javascript" src="js/vue2.5.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/turn.js" ></script>
		<script type="text/javascript" src="js/global.js" ></script>
		<script type="text/javascript" src="js/layer/layer.js" ></script>
		
		<script>
			var vue = new Vue({
				el:'#vue',
				data:{
					majorsData:[],
					turnData:[],
					jobData:[
						{
							jobId:'',
							jobName:'',
							avgSal:'',
							jobIntro:'',
							sourseData:[
								{
									sourseId:'',
									sourseName:'',
									sourseImg:''
								}
							]
						}
					]
//					sourseData:[]
					
				},
				methods:{
					queryMajors:function() {
						axios.get(baseUrl + '/sourse/majors')
							.then(function(response){
								this.majorsData = response.data;
								
							}.bind(this))
							.catch(function(error){
								layer.msg('获得专业列表失败');
							});
					},
					queryJobSourse:function() {
						//打开网页，判断当前浏览器本地是否有 头像缓存
						if(localStorage.getItem('userPic')){
							$('#login').css('background','url(' + localStorage.getItem('userPic') +')');
						}
						if(localStorage.getItem('userLoginName')){
							axios.get(baseUrl + '/user/message')
							.then(function(response){
								var majorsId = response.data.majors.majorsId;
								axios.get(baseUrl + '/job/queryMajors',{
										params:{majorsId:majorsId}
									})
									.then(function(response){
										
										for(var i = 0; i < response.data.length;i++) {
											this.jobData.job.push({
												jobName:response.data[i].jobName,
												avgSal:(response.data[i].jobMinSal + response.data[i].jobMaxSal)/2,
												jobIntro:response.data[i].jobIntro
											});
											var jobId = response.data[i].jobId;
											axios.get(baseUrl + '/sourse/jobMajors',{
													params:{jobId:jobId}
												})
												.then(function(response){
													this.jobData.sourseData.push({
														soursId:response.data[i].sourseId,
														sourseImg:response.data[i].sourseImg,
														sourseName:response.data[i].sourseName
													});
												}.bind(this))
												.catch(function(error){
													layer.msg('获得专业列表失败');
												});
												
										}
										
									}.bind(this))
									.catch(function(error){
										layer.msg('获得专业列表失败');
									});
								
							}.bind(this))
							.catch(function(error){
								layer.msg('获得专业列表失败');
							});
						}
						else {
							axios.get(baseUrl + '/sourse/newMajors')
							.then(function(response){
								
								var majorsId = response.data[0].job.majors.majorsId
								axios.get(baseUrl + '/job/queryMajors',{
										params:{majorsId:majorsId}
									})
									.then(function(response){
										
										for(var i = 0; i < response.data.length;i++) {
											this.jobData.push({
												jobName:response.data[i].jobName,
												avgSal:(response.data[i].jobMinSal + response.data[i].jobMaxSal)/2,
												jobIntro:response.data[i].jobIntro
											});
											var jobId = response.data[i].jobId;
											axios.get(baseUrl + '/sourse/jobMajors',{
													params:{jobId:jobId}
												})
												.then(function(response){
													this.jobData.sourseData.push({
														soursId:response.data[i].sourseId,
														sourseImg:response.data[i].sourseImg,
														sourseName:response.data[i].sourseName
													});
												}.bind(this))
												.catch(function(error){
													layer.msg('获得专业列表失败');
												});
										}
									}.bind(this))
									.catch(function(error){
										layer.msg('获得专业列表失败');
									});
								
							}.bind(this))
							.catch(function(error){
								layer.msg('获得专业列表失败');
							});
						}
					},
					checkMajors:function(index , majorsId) {
						
						axios.get(baseUrl + '/job/queryMajors',{
								params:{majorsId:majorsId}
							})
							.then(function(response){
								this.jobData = [];
								this.sourseData = [];
								alert('被执行');
								for(var i = 0; i < response.data.length;i++) {
									this.jobData.push({
										jobName:response.data[i].jobName,
										avgSal:(response.data[i].jobMinSal + response.data[i].jobMaxSal)/2,
										jobIntro:response.data[i].jobIntro
									});
									console.log(this.jobData);
									var jobId = response.data[i].jobId;
									axios.get(baseUrl + '/sourse/jobMajors',{
											params:{jobId:jobId}
										})
										.then(function(response){
											this.jobData.sourseData.push({
												soursId:response.data[i].sourseId,
												sourseImg:response.data[i].sourseImg,
												sourseName:response.data[i].sourseName
											});
											console.log(this.jobData);
										}.bind(this))
										.catch(function(error){
											layer.msg('获得专业列表失败');
										});
								}
							}.bind(this))
							.catch(function(error){
								layer.msg('获得专业列表失败');
							});
					},
					queryTurn:function() {
						axios.get(baseUrl + '/sourse/turn')
							.then(function(response){
								this.turnData = response.data;
								
							}.bind(this))
							.catch(function(error){
								layer.msg('获得专业列表失败');
							});
					},
					video:function(index , sourseId) {
						location.href = "video.html?sourseId=" + sourseId;
					},
					login:function() {
						if(localStorage.getItem('userLoginName')) {
							location.href = "me.html";
						}
						else {
							layer.open({
							title:'用户登录',
							type:2,
							area:['700px','800px'],
							content:'login.html'
						});
						}
					},
					search:function() {
						location.href = "SourseIndex.html";
					}
				},	
				mounted:function(){
					this.queryMajors();
					this.queryTurn();
					this.queryJobSourse();
				}
			});
		</script>
	</body>
</html>
